<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/plan.css">
</script>
<style>
    .nextTable {
        width: 100%;
    }

    .box .layui-input-block {
        width: 100%;
    }

    table thead tr th,
    table tbody tr .t {
        /* height: 30px; */
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }

    table {
        table-layout: fixed;
        /*table的内部布局固定大小，才可以通过td的width控制宽度*/
        word-wrap: break-word;
        /*允许长单词换到下一行*/
    }
</style>
<div class="layui-containner">
    <div class="layui-fluid">
        <div class="layui-title">保养工单详情</div>
        <ul class="box layui-row">
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单编号: </label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单名称:</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养工单状态：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养计划名称：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">保养负责人：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养开始时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 保养截止时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label"> 实际完成时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4 xun">
                <div class="layui-form-item">
                    <label class="layui-form-label"> 保养耗时：</label>
                    <div class="layui-input-block">
                    </div>
                </div>

                <div>位置范围：<span></span></div>
                <div>保养说明：<span></span></div>
            </li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <span class="layui-title-inner">设备基本信息</span>
        </div>
        <table class="layui-table" lay-size="sm">
            <thead>
                <tr>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>供应商</th>
                    <th>设备系列</th>
                    <th>设备型号</th>
                    <th style="width: 50%;">保养项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'user', 'api', "element", 'tree', 'laytpl', 'util', 'jquery'], function () {
        var $ = layui.jquery,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            utill = layui.utill,
            element = layui.element,
            laytpl = layui.laytpl,
            tree = layui.tree,
            util = layui.util,
            form = layui.form;
        var lay = JSON.parse(sessionStorage.getItem('lay-this'));
        var url = `[data-jump="${lay}"]`;
        $(url).addClass('layui-this').attr('color', '#FFF');
        form.render();
        // 巡检计划详情信息 

        let planId = layui.router().hash.split('=')[1]
        admin.req({
                type: 'post',
                url: layui.api.host + '/order/MaintainDetails.json',
                dataType: 'json',
                contentType: "application/json",
                data:JSON.stringify({id:planId}),
                success: function (res) {
                    let planDetails = res.data.equip // 表格数据
            let planid = res.data.fil // 头部信息 
            let table = `<tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <table class="nextTable">
                                            <thead>
                                                <tr>
                                                    <td>项目名称</td>
                                                    <td>保养部位</td>
                                                    <td>保养说明</td>
                                                    <td>相关文档</td>
                                                    <td>是否完成</td>
                                                    <td>保养结果</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>`;
            if (planid.fil05 == 1) {
                planid.fil05 = '待执行';
            } else if (planid.fil05 == 2) {
                planid.fil05 = '未完成';
            } else if (planid.fil05 == 7) {
                planid.fil05 = '超时';
            }
            else if (planid.fil05 == 8) {
                planid.fil05 = '超时完成';
            }
            else if (planid.fil05 == 9) {
                planid.fil05 = '已完成';
            }
            $('.layui-input-block').eq(0).html(planid.fil01)
            $('.layui-input-block').eq(1).html(planid.tcReqName)
            $('.layui-input-block').eq(2).html(planid.fil05)
            $('.layui-input-block').eq(3).html(planid.tcReqName)

            $('.layui-input-block').eq(4).html(planid.xjgen02)
            $('.layui-input-block').eq(5).html(planid.fil12)
            $('.layui-input-block').eq(6).html(planid.fil13)
            $('.layui-input-block').eq(7).html(planid.fil15)
            $('.layui-input-block').eq(8).html(planid.tcReqDuration + '/小时')

            $('.xun div span').eq(0).html(planid.fil07)
            $('.xun div span').eq(1).html(planid.fil21)

            planDetails.forEach(item => {
                let nextTable = ''
                item.byproject.forEach((elem, index) => {
                    nextTable += `<table class="nextTable">
                                            <tbody>
                                                <tr>
                                                    <td class="t">${elem.tcMaintName}</td>
                                                    <td class="t">${elem.tcMaintPart}</td>
                                                    <td class="t">${elem.tcMaintDsc}</td>
                                                    <td class="t doc" data-data="${elem.list[index].tcFileUrl}" data-length="${index}" data-name="${elem.list[index].tcFileName}">查看</td>
                                                    <td class="t">${elem.tcProjStatus == 1 ? '是' : '否'}</td>
                                                    <td class="t">${elem.tcProjDsc || '&nbsp;&nbsp;'}</td>
                                                </tr>
                                            </tbody>
                                        </table>`
                })
                table += `<tr>
                                    <td class="t">${item.fia01}</td>
                                    <td class="t">${item.fia02}</td>
                                    <td class="t">${item.fic02}</td>
                                    <td class="t">${item.pmc03}</td>
                                    <td class="t">${item.tcSeriesCode}</td>
                                    <td class="t">${item.fii02}</td>
                                    <td class="t">
                                        ${nextTable}
                                    </td>
                                </tr>`

            })
            $('.layui-table tbody').html(table)
                }
            })
        $('table').on('click', '.doc', function (data) {
            var tcDocId = $(this).data('data');
            var name = $(this).data('name');
            var html = `<div>
                                <a href="`+ api.imghost + "/" + `${tcDocId}" target="_blank">${name}</a>
                            </div>`;
            layer.open({
                type: 0,
                title: '文档',
                area: ['50', '50'],
                content: html
            });

        })


    })
</script>